<template lang='pug'>
.details-bnner
    .topLis
        p(:class="{'active':zindex == 0}" @click="zindex = 0") 为你推荐
        p(:class="{'active':zindex == 1}" @click="zindex = 1") 爆款推荐
    Swiper
        SwiperSlide(v-for="d in listbner")
            .wrap
                Fir(v-for="item in d" :data='item' :width="'32%'" :sp="true")    
</template>
 
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import Fir from '../components/Fir.vue'
export default {
  name: "vueName",
  data() {
    return {
      listbner: [],
      zindex: 0
    };
  },
  components:{
      Swiper,
      SwiperSlide,
      Fir
  },
  created() {
    this.$http.get("http://192.168.43.168:8082/user/allsearch").then((val) => {
      this.listbner = this._.chunk(val.data.splice(0,24),6)
    });
  },
};
</script>
 
<style scoped lang="sass">
.details-bnner
    width: 100%
    background: #fff
    padding: .2rem
    box-sizing: border-box
    height: 4.2rem
    position: relative
    z-index: 0
    .topLis
        width: 100%
        height: .5rem
        background: #fff
        display: flex
        padding: 0 .2rem
        align-items: center
        justify-content: space-around
        p
            font-size: .12rem
            font-weight: bold
            position: relative
            &.active
                color: #ff6700
                &:after
                    content: ""
                    position: absolute
                    width: .2rem
                    height: .02rem
                    background: #ff6700
                    bottom: -.03rem
                    left: 50%
                    transform: translateX(-50%)
                    border-radius: .1rem
    .swiper-container
        height: 100%
        .wrap
            //- background: #000
            width: 100%
            height: 90%
            flex-wrap: wrap
            display: flex
            justify-content: space-around
    .box
        width: 100%
        height: 100%
</style>